import React, { useEffect,useState, useContext } from 'react'
import './Mine.less'
import Header from '../../components/Header/Header'
import { $pre } from '../../http/http'
import { reqgetbanner } from '../../http/api'
import { Swiper } from 'antd-mobile'
import { MyContext } from '../../App'

const Mine = () => {
  let {state:{userInfo:user}}=useContext(MyContext);
  let [list,setList] = useState([]);
  let getList =async ()=>{
    let { data: res } = await reqgetbanner();
    if (res.code === 200) {
      let arr = res.list ? res.list : [];
      setList(arr);
    }
  }
  useEffect(()=>{
    getList();
  },[])
  return (
    <div className='mine'>
      <Header back title="我的"></Header>
      <div className='nickname'>用户：{user.nickname ? user.nickname : '暂无数据'}</div>
      <div className="banner">
        <Swiper loop autoplay>{list.map(item => (
          <Swiper.Item key={item.id}>
            <div
              className={'content'}
            >
              <img src={$pre + item.img} alt="" />
            </div>
          </Swiper.Item>
        ))}</Swiper>
      </div>
    </div>
  )
}
export default Mine